<template>
  <view class="container">
    <!-- VIP套餐列表 -->
    <view class="vip-packages" v-if="config">
      <view class="section-title">VIP套餐</view>
      <view class="package-list">
        <view class="package-item" v-for="(item, index) in packages" :key="index" :class="{ 'package-active': selectedPackage === index }" @tap="selectPackage(index)">
          <view class="package-header">
            <text class="package-name">{{ item.name }}</text>
            <text class="package-price">¥{{ item.price }}</text>
          </view>
          <view class="package-features">
            <view class="feature-item" v-for="(feature, fIndex) in item.features" :key="fIndex">
              <text class="feature-icon">✓</text>
              <text class="feature-text">{{ feature }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 支付信息 -->
    <view class="payment-info" v-if="selectedPackage !== null && config">
      <view class="section-title">支付信息</view>
      <view class="payment-content">
        <view class="user-id-section">
          <text class="user-id-label">您的用户ID：</text>
          <view class="user-id-box">
            <text class="user-id-text">{{ userState.id }}</text>
            <button class="copy-btn" @tap="copyUserId">复制</button>
          </view>
        </view>
        
        <view class="qr-section">
          <image class="qr-code" :src="config.payment_info.wechat_qrcode" mode="aspectFit"></image>
          <text class="qr-tip">请使用微信或支付宝扫码支付</text>
        </view>
        
        <view class="payment-steps">
          <view class="step-item">
            <text class="step-num">1</text>
            <text class="step-text">扫描二维码支付 {{ packages[selectedPackage].price }}元</text>
          </view>
          <view class="step-item">
            <text class="step-num">2</text>
            <text class="step-text">支付时请在备注中填写您的用户ID：{{ userState.id }}</text>
          </view>
          <view class="step-item">
            <text class="step-num">3</text>
            <text class="step-text">联系客服</text>
          </view>
          <view class="step-item">
            <text class="step-num">4</text>
            <text class="step-text">发送支付截图和用户ID给客服</text>
          </view>
          <view class="step-item">
            <text class="step-num">5</text>
            <text class="step-text">等待客服核对后发送激活码（预计1小时内）</text>
          </view>
        </view>

        <!-- 客服按钮 -->
        <button class="customer-service-btn" open-type="contact">
          <text class="btn-icon">💬</text>
          <text>联系客服</text>
        </button>
      </view>
    </view>

    <!-- 加载中提示 -->
    <view class="loading" v-if="!config">
      <text>加载中...</text>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { userState } from '@/services/user'
import store from '@/store/index'

const config = computed(() => store.state.config.config)

// VIP套餐数据
const packages = computed(() => {
  if (!config.value) return []
  
  return [
    {
      name: '月度会员',
      price: config.value.payment_info.price.month,
      features: [
        '无限次配音',
        '所有音色可用',
        '高清音质导出',
        '优先客服支持'
      ]
    },
    {
      name: '年度会员',
      price: config.value.payment_info.price.year,
      features: [
        '无限次配音',
        '所有音色可用',
        '高清音质导出',
        '优先客服支持',
        '专属客服通道',
        '赠送100次高级音色'
      ]
    },
    {
      name: '永久会员',
      price: config.value.payment_info.price.lifetime,
      features: [
        '无限次配音',
        '所有音色可用',
        '高清音质导出',
        '优先客服支持',
        '专属客服通道',
        '赠送500次高级音色',
        '终身免费更新'
      ]
    }
  ]
})

// 选中的套餐
const selectedPackage = ref(0)

// 客服联系方式
const customerService = ref('VIP_Service_888')

// 选择套餐
function selectPackage(index) {
  selectedPackage.value = index
}

// 复制用户ID
function copyUserId() {
  uni.setClipboardData({
    data: userState.value.id,
    success: () => {
      uni.showToast({
        title: '用户ID已复制',
        icon: 'success'
      })
    }
  })
}
</script>

<style lang="scss">
.container {
  padding: 20rpx;
  background: #f8f8f8;
  min-height: 100vh;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin: 30rpx 0;
}

.vip-packages {
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.package-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.package-item {
  border: 2rpx solid #eee;
  border-radius: 12rpx;
  padding: 30rpx;
  transition: all 0.3s;
  
  &.package-active {
    border-color: #07c160;
    background: rgba(7, 193, 96, 0.05);
  }
  
  .package-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    
    .package-name {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
    
    .package-price {
      font-size: 36rpx;
      color: #07c160;
      font-weight: bold;
    }
  }
  
  .package-features {
    .feature-item {
      display: flex;
      align-items: center;
      margin-bottom: 10rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .feature-icon {
        color: #07c160;
        margin-right: 10rpx;
      }
      
      .feature-text {
        font-size: 28rpx;
        color: #666;
      }
    }
  }
}

.payment-info {
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
}

.payment-content {
  .user-id-section {
    margin-bottom: 30rpx;
    
    .user-id-label {
      font-size: 28rpx;
      color: #666;
      margin-bottom: 10rpx;
      display: block;
    }
    
    .user-id-box {
      display: flex;
      align-items: center;
      gap: 20rpx;
      
      .user-id-text {
        flex: 1;
        font-size: 32rpx;
        color: #333;
        background: #f8f8f8;
        padding: 20rpx;
        border-radius: 8rpx;
      }
      
      .copy-btn {
        width: 160rpx;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        background: #07c160;
        color: #fff;
        border-radius: 8rpx;
        font-size: 28rpx;
        
        &:active {
          opacity: 0.8;
        }
      }
    }
  }
  
  .qr-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30rpx;
    
    .qr-code {
      width: 400rpx;
      height: 400rpx;
      margin-bottom: 20rpx;
    }
    
    .qr-tip {
      font-size: 28rpx;
      color: #666;
    }
  }
  
  .payment-steps {
    .step-item {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .step-num {
        width: 40rpx;
        height: 40rpx;
        line-height: 40rpx;
        text-align: center;
        background: #07c160;
        color: #fff;
        border-radius: 50%;
        font-size: 24rpx;
        margin-right: 20rpx;
      }
      
      .step-text {
        flex: 1;
        font-size: 28rpx;
        color: #333;
      }
    }
  }
}

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200rpx;
  color: #999;
  font-size: 28rpx;
}

.customer-service-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 88rpx;
  margin-top: 30rpx;
  background: #07c160;
  color: #fff;
  font-size: 32rpx;
  border-radius: 44rpx;
  border: none;
  
  .btn-icon {
    margin-right: 10rpx;
    font-size: 36rpx;
  }
  
  &:active {
    opacity: 0.9;
  }
}
</style> 